<template>
  <div class="box">
        <topLabel ref="topLabelRef"></topLabel>
        <div class="flex justify-between mt-[25px]">
          <echartsList class="w-[49%] echarts" ref="echartsRef"></echartsList>
          <div class="w-[49%]">
                <ProTable
                  class="protable"
                  :data="tableData"
                  :page="page"
                  :column="column"
                  :rowControl="[]"
                  :elProps="elProps"
                  :disabled="[]"
                  :controlWidth="controlWidth"
                  @page-change="onPageChange"
                  @pageRefresh="pageRefresh"
                >
                <template #search_operate>
            <el-table-column
            label="操作"
             min-width="160"
             fixed="right"
          >
            <template #default="scope" >
            <el-link @click="look(scope.$index, scope.row)" :underline="false" type="primary">查看</el-link>
            </template>
          </el-table-column>
                </template>
                </ProTable>
          </div>
        </div>
        <lookNotice ref="lookRef"></lookNotice>
  </div>
</template>

<script setup>
import { reactive, ref,onMounted } from "vue";
import topLabel from './toplabel.vue'
import echartsList from './echartsList.vue'
import {annunciates} from '@/http/index.js'
import {loading,closeLoading} from '@/common/function.js'
import { elProps,controlWidth } from "./index.js";
import lookNotice from './look.vue'

const lookRef = ref('')
const look = (index,row)=>{
  lookRef.value.init(row)
}
const page = reactive({
  current_page: 1,
  per_page: 15, 
  total: 10, 
  page_size: [15, 20, 30],
});
const obj = reactive({
  page: page.current_page,
  limit: page.per_page,
  name: "",
  status: "",
  time: "",
});
const column = {
  title: "公告標題",
  content: "公告內容",
  username:'創立者',
  create_time:'發佈日期',
}

const onPageChange = async({ e, type }) => {
  if (type == "current") {
    obj.page = e
  }
  if (type == "size") {
     obj.page = 1
    obj.limit = e
  }
  await notice()
};
const tableData = ref([])
const notice = async()=>{
  loading()
  const data = await annunciates(obj)
  console.log(data);
  if (data.code == 200) {
    tableData.value = data.data.data
  }
  closeLoading()
}
const pageRefresh = ()=>{
   notice()
}
const topLabelRef = ref('')
const echartsRef = ref('')
const init = ()=>{
  topLabelRef.value.init()
  echartsRef.value.init()
}
onMounted(() => {
  notice()
  init()
})

</script>

<style lang='less'  >
.box {
  padding: 16px 33px;
}
.info-row{
    --el-table-tr-bg-color: #D8DBE2 !important;
  }
.echarts{
      background: #FFFFFF;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.12);
}

</style>